<template>
  <div ref="bottom1_container" style="height: 90%"></div>
</template>

<script>
import { RingProgress } from "@antv/g2plot";
import service from "../../../utils/request";
import base_token from "../../../utils/base_constant";
import { Gauge } from "@antv/g2plot";
import { parseTwoDigitYear } from 'moment';

export default {
  data() {
    return {
      processingCount: 0,
      allCount: 0,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let url = "/workorder/pageQuery";
      let res = await service.get(url, {
        params: {
          page: 1,
          pageSize: 10,
        },
        headers: {
          Authorization: base_token,
        },
      });
      let data = res.data.list;
      this.allCount = res.data.total;
      for (let item in data) {
        if (data[item].status == "进行中") {
          this.processingCount++;
        }
      }
      this.initCharts();
    },

    

    initCharts() {
      const gauge = new Gauge(this.$refs.bottom1_container, {
        percent: this.processingCount/this.allCount,
        autoFit: true,
        range: {
          color: "l(0) 0:#B8E1FF 1:#3D76DD",
        },
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        indicator: null,
        statistic: {
          title: {
            offsetY: -36,
            style: {
              fontSize: "36px",
              color: "orange",
            },
           formatter: () => ((this.processingCount/this.allCount)*100).toFixed(1)+'%' 
          },
          content: {
            style: {
              fontSize: "24px",
              lineHeight: "44px",
              color: "orange",
            },
            formatter: () => "加载进度",
          },
        },
      });

      gauge.render();
    },
  },
};
</script>
